@import "src/css/mixin";

#Invitation {
  background: #FFFFFF;
  .icon-return{
    width: .5rem;
    height: .5rem;
    display: block;
    line-height: .5rem;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .service-title {
    font-size: 0.17rem;
    line-height: 1;
    text-align: center;
    color: $black;
    height: 0.48rem;
    padding: 0.15rem;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.13);
  }
  .return {  
    float: left;
    font-size: .14rem;
    color: $gray;
    display: block;
    width: .5rem;
    height: .47rem;
    background-color: #fff;
    text-align: center;
    line-height: .5rem;
    position: absolute;
    left: .1rem;
    top: 0;

    .icon-return{
      color: $lightgray;
      position: relative;
      top: 1px;
    }
  }
  .invitation-title{
    font-size: .3rem;
    color: $black;
    letter-spacing: 0;
    line-height: .3rem;
    margin: .3rem 0 .48rem 0;
    font-weight: 500;
  }
  .invitation-list{
    position: relative;
    border: 1px solid $linecolor;
    border-radius: .06rem;
    margin-bottom: .33rem;
    .all-list{
      height: 2.94rem;
      overflow-y: auto;

    }
    .nolist{
      font-size: .25rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 100%;
      color: $black;
      display: block;
      padding: 0 .2rem;
      font-weight: 500;
      p{
        font-size: .12rem;
        color: $lightgray;
        letter-spacing: 0;
        line-height: .2rem;
        margin: .2rem auto 0 auto;
      }
    }
    .num{
        background: $blue;
        height: .6rem;
        width: .6rem;
        border-radius: 50%;
        text-align: center;
        line-height: .6rem;
        font-size: .32rem;
        color: #FFFFFF;
        letter-spacing: 0;
        position: absolute;
        right: .2rem;
        top: -.3rem;
    }
    .list{
       height: .55rem;
       line-height: .55rem; 
       border-bottom: 1px solid $linecolor;
       padding: 0 .2rem;
       margin: 0;
       .avatar{
         display: inline-block;
         width: .25rem;
         height: .25rem;
         border-radius: 2px;
         margin-right: .15rem;
       }
       .name{
            display: inline-block;
            font-size: .14rem;
            color: $lightgray;
            letter-spacing: -0.68px;
            width: .71rem;
            height: .55rem;
            line-height: .55rem; 
            vertical-align: middle;
            @include text-ellipsis($width:.66rem);
       }
       .hasbind{
            display: inline-block;
            font-size: .14rem;
            color: $gray;
            height: .55rem;
            line-height: 1; 
            padding: 0.07rem 0;
            vertical-align: middle;
       }
       .mobile{
         line-height: .2rem;
       }
       .invite_buy_pack{
         display: block;
         color: $lightgray;
         line-height: .2rem;
         font-size: .1rem;
       }
       .lightgray{
         color: $lightgray;
         line-height: .4rem;
       }
       .time{
            font-size: .14rem;
            color: $lightgray;
            letter-spacing: 0;
            float: right;
            height: .55rem;
            line-height: .55rem; 
       }
    }
  }
  .invitation-button{
    .btn{
      display: block;
      height: .5rem;
      width: 100%;
      height: .5rem;
      line-height: .5rem;
      font-size: .15rem;
      color: #fff;
      background: $blue;
      border-radius: 2px;
      padding: 0;
      user-select: none;
    }
    p{
      text-align: center;
      font-size: .12rem;
      color: $lightgray;
      letter-spacing: 0;
      line-height: .2rem;
      margin: .2rem auto .3rem auto;
    }
    i{
      font-style: normal;
      color: #0F0E10;
    }
  }
}
  
